<template>
  <div class="slot-container" :style="{background:bg}">
    <div class="left" @click="left">
      <slot name="left">返回</slot>
    </div>
    <div class="right" @click="right">
      <slot name="right">分享</slot>
    </div>
    <header>{{ title }}</header>
  </div>
</template>

<script>
/* 
prop
属性名     类型    默认值   
bg        string    red
title      string    首页


slot
插槽名    说明

left   定义左侧内容
right  定义右侧内容


event

事件名   说明
left    点击左侧触发
right   点击右侧触发




*/
export default {
  props: {
    title: {
      type: String,
      default: "首页"
    },
    bg:{
        type:String,
        default:'red'
    }
  },
  name: "",
  methods: {
    left() {
      this.$emit("left");
    },
    right() {
      this.$emit("right");
    }
  }
};
</script>
<style lang="less" scoped>
.slot-container {
  width: 100%;
  padding: 20px 10px;
  background-color: pink;
  .left {
    float: left;
    padding: 0 30px;
  }
  .right {
    float: right;
    padding: 0 30px;
  }
  header {
    width: 100%;
    text-align: center;
  }
}
</style>
